<template>
  <div id="app">
  <tab-bar>
   <tab-bar-item path="/wx" activeColor="#1AF827">
     <img slot="item-icon" src="./assets/img/tabbar/wx.png" alt="">
     <img slot="item-icon-active" src="./assets/img/tabbar/wx_active.png" alt="">
     <div slot="item-text">微信</div>
   </tab-bar-item>
    <tab-bar-item path="/addressBook" activeColor="#1AF827">
      <img slot="item-icon" src="./assets/img/tabbar/addressBook.png" alt="">
      <img slot="item-icon-active" src="./assets/img/tabbar/addressBook_active.png" alt="">
      <div slot="item-text">通讯录</div>
    </tab-bar-item>
    <tab-bar-item path="/find" activeColor="#1AF827">
      <img slot="item-icon" src="./assets/img/tabbar/find.png" alt="">
      <img slot="item-icon-active" src="./assets/img/tabbar/find_active.png" alt="">
      <div slot="item-text">发现</div>
    </tab-bar-item>
    <tab-bar-item path="/me" activeColor="#1AF827">
      <img slot="item-icon" src="./assets/img/tabbar/me.png" alt="">
      <img slot="item-icon-active" src="./assets/img/tabbar/me_active.png" alt="">
      <div slot="item-text">我</div>
    </tab-bar-item>
  </tab-bar>
    <router-view/>
  </div>
</template>

<script>
  import TabBar from "./components/common/tabbar/TabBar";
  import TabBarItem from "./components/common/tabbar/TabBarItem";
  export default {
    name: 'App',
    components: {
      TabBar,
      TabBarItem
    },

  }
</script>

<style>
  /* 引入基础样式 */
  @import "./assets/css/base.css";
  #app{
     max-width: 700px;
  }
</style>
